<template>
    <view class="xilu">
        <u-navbar :safeAreaInsetTop="true" autoBack :placeholder="true" bgColor="#F9C022" title="查看物流">
        </u-navbar>
        <view class="container">
            <view class="xilu_bg_block"></view>
            <view class="pb30"></view>
            <view class="box p30 fs30 col10 mb30">
                <view class="pb30"><text class="col89">快递公司</text><text>{{order.express_name}}</text></view>
                <view><text class="col89">快递单号</text><text>{{order.express_no}}</text></view>
            </view>
            <view class="box p30">
                <view class="flex-box gou" v-for="(item,index) in logistics">
                    <view class="left_box">
						<view class="fs24">{{item.date}}</view>
						<view class="fs20">{{item.time}}</view>
					</view>
                    <view class="right_box">{{item.context}}</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
				orderId:0,
				logistics:[],
				order:{}
            };
        },
		onLoad(options) {
			this.orderId = options.order_id || 0;
			this.fetchLogistics();
		},
		methods:{
			fetchLogistics(){
				this.$core.post({url: 'xilumarket.order/logistics',data: {order_id: this.orderId},loading: true,success: ret => {
					this.logistics = ret.data.logistics;
					this.order = ret.data.order;
				},fail: err => {
					uni.showToast({title: err.msg,icon: 'none'})
					return false;
				}
				});
			}
		}
    }
</script>

<style lang="scss" scoped>
    .xilu {
        .container {
            padding: 0 30rpx;
            background: var(--ghostWhite);
            min-height: calc(100vh - var(--status-bar-height) - 44px);
            height: auto;
        }

        &_bg_block {
            width: 750rpx;
            height: calc(452rpx - 44px - var(--status-bar-height));
            background: linear-gradient(180deg, #F9C022 0%, rgba(255, 193, 0, 0) 100%);
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            z-index: 2;
        }

        .box {
            position: relative;
            z-index: 3;
            box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(183, 189, 202, 0.1);
            border-radius: 15rpx;
            background: var(--white);
        }

        .left_box {
            text-align: center;
            width: 66rpx;
            margin-right: 28rpx;
            padding-bottom: 50rpx;
        }

        .right_box {
            width: 486rpx;
            font-size: 30rpx;
            font-weight: 400;
            line-height: 42rpx;
            flex: 1;
            padding-left: 48rpx;
            border-left: 1rpx solid #eee;
            position: relative;
            padding-bottom: 50rpx;
        }

        .shou {
            color: #004794;
            .left_box{
                color: #fff;
            }

            .right_box::before {
                content: "";
                display: block;
                width: 36rpx;
                height: 44rpx;
                background: url("/static/icon/shou.png") no-repeat center;
                background-size: 36rpx 44rpx;
                position: absolute;
                left: 0;
                transform: translateX(-50%);
                top: 20rpx;
            }
        }

        .gou {
            color: #101010;

            .right_box::before {
                content: "";
                display: block;
                width: 36rpx;
                height: 36rpx;
                background: url("/static/icon/gou.png") no-repeat center;
                background-size: 36rpx 36rpx;
                position: absolute;
                left: 0;
                transform: translateX(-50%);
                top: 24rpx;
            }
        }

        .pai {
            color: #898989;

            .right_box::before {
                content: "";
                display: block;
                width: 36rpx;
                height: 36rpx;
                background: url("/static/icon/pai.png") no-repeat center;
                background-size: 36rpx 36rpx;
                position: absolute;
                left: 0;
                transform: translateX(-50%);
                top: 24rpx;
            }
        }

        .yun {
            color: #898989;

            .right_box::before {
                content: "";
                display: block;
                width: 36rpx;
                height: 36rpx;
                background: url("/static/icon/yun.png") no-repeat center;
                background-size: 36rpx 36rpx;
                position: absolute;
                left: 0;
                transform: translateX(-50%);
                top: 24rpx;
            }
        }
    }
</style>